<template>
  <div>
   <!-- 添加商品购物车设置 -->
    <div id='a_car'>
       <div class='a_list_top'>
           <div class='a_shop_car'>
               <span class='a_tit'>{{totalsum}}</span>
           </div>
            <i class="a84"></i>
        </div> 
       <div class='a_list_body'>
            <div class='a_l_top'>
              <div class='a_t'>
                <input v-model='checked' @change="isselect" type='checkbox'>
                 <span>全选</span><span>（已选{{totalsum}}）</span>
              </div>    
                 <span class='emptycar' @click="emptyCar()" >清空购物车 </span>
            </div>
              <!-- 加减商品设置 -->
            <div class='a_l_body'>
              <table>
                     <tr v-for="product in $root.cars[shopid]" :key="product.id" class='tr_table'>
                        <td class='p_checkbox'><input type='checkbox' v-model='pid' :value="product.id"></td>
                        <td class='p_img'><img :src='product.imgsrc' alt=''></td>
                        <div class='p_l'>
                            <td class='p_t'>{{product.title}}</td>
                             <div class='p_b'>
                                <td class='p_l_b'>￥{{product.price}}</td>
                                <td class='p_r_b'>
                                    <div class='p_sub' @click="carSub(product)"></div>
                                     <li class='p_num'>{{product.num}}</li>
                                    <div class='p_add' @click="carAdd(product)" @change="isselect"></div>
                                </td>
                             </div>
                        </div>
                    </tr> 
                </table>
            </div>
        </div> 
        <!-- 结算界面 -->
        <div class='a_list_bottom'>
             <div class='a_l_l_left'>￥{{total}}</div>
             <div class='ec_count2'>去结算</div>
         </div> 
    </div>
      <!-- 空购物车设置 -->
    <div id='b_car'>
        <div class='empty_car'>
            <div class='ec_car'></div>
            <div class='ec_font'>购物车是空的</div>
            <div class='ec_count'>去结算</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    props:['shopid'],
    data(){
        return{
            pid:[],
            checked:false
        };
    },
    computed:{
        //全部产品价格
        total(){
            let sum=0
            this.pid.forEach((el)=>{
                let p=this.$root.cars[this.shopid][el]
                sum+=p.num*p.price
                console.log(el)
            });
            return Math.round(sum*100)/100;
        },
        //所有产品件数总和
         totalsum(){
            let numsum=0
            this.pid.forEach((el)=>{
                let p=this.$root.cars[this.shopid][el]
                numsum+=p.num
                console.log(el)
            });
            return numsum
        },
        countPid(){
            return this.pid.length;
        },
        countcars(){
            return Object.keys(this.$root.cars[this.shopid]).length;
        }
    },
    watch:{
        //选中处理
        countpid(newval){
            if(this.countPid===this.countCars){
                this.checked=true
            }else{
                this.checked=false
            }
            newval==this.countcars;
        }
    },
    methods:{
        //选择商品
        isselect(){
                if(this.checked){
                   this.pid= Object.keys(this.$root.cars[this.shopid])
                }else{
                    this.pid=[]
                }
        },
        //增加商品
        carAdd(product){
            if(product.id in this.$root.cars[this.shopid]){
                if(product.num>=product.store){
                    return;
                }
                this.$root.cars[this.shopid][product.id].num++;
            }else{
                product.num=1;
                this.$set(this.$root.cars[this.shopid],product.id,product);
            }
        },
        //减商品
        carSub(product){
            product.num--;
            if(product.num==0){
                this.$delete(this.$root.cars[this.shopid],product.id);
            }
        },
         //清空购物车
        emptyCar(){
            this.$set(this.$root.cars,this.shopid,{});
        },
        // 删除商品
        del(id){
           this.$delete(this.$root.cars[this.shopid],id)
        }
    }
}
</script>

<style scoped>
/* 多选购物车设置 */
#a_car{
    background: #fff;
    position:relative;
    z-index:44;
}
.a_shop_car{
    background: url(/static/cart.png) no-repeat;
    height: 3.625rem;
    background-position: 0.625rem -4.375rem;
    background-size: 3.125rem 7.8rem;
    top: -3.94rem;
    width: 5rem;
    position: absolute;
}
/* 购物车中部 */
.a_list_body{
    font-size:0.875rem;
}
.a_l_top{
    display:flex;
    justify-content: space-between;
    width:100%;
    padding:1rem 0.1rem ;
}
.a_t{
    text-align: left;
    width:70%;
    position: relative;
}
.emptycar{
   background:url(/static/delete.png) no-repeat;
   height:1rem;
   background-size:1rem 1rem;
   display: inline-block;
   padding:0 1rem;
   text-align: right;
}
.a_tit{
    position: absolute;
    top: 0.3125rem;
    left: 2.75rem;
    padding: 0 0.3125rem;
    height: 0.94rem;
    line-height: 0.94rem;
    overflow: hidden;
    text-align: center;
    color: #fff;
    background-color: #ff5d5c;
    border-radius: 0.44rem;
    font-size: 0.625rem;
}
.a_list_bottom{
    width:100%;
    display: flex;
    justify-content: space-between;
    border-top:0.1rem solid #d9d9d9;
}
.a_l_l_left{
    width:70%;
    line-height: 3rem;
    font-size: 1.125rem;
    color: #ff3434;
}
.a84{
    position: absolute;
    left: 1.8rem;
    top: -0.44rem;
    width: 0.69rem;
    height: 0.44rem;
    background: url(/static/a.png) 0 0 no-repeat;
    background-size: 0.69rem 0.44rem;
}
.tr_table{
    width:100%;
    display: flex;
}
.p_checkbox{
    width:10%;
}
.p_img{
    width:20%；
}
.p_l{
    width:70%;
    display: flex;
    flex-wrap:wrap;
    flex-direction: row;
}
.p_t{
    width:100%;
}
.p_b{
    width:100%;
    display: flex;
    justify-content: space-between;
}
.p_l_b{
    width:30%;
    line-height: 2.25rem;
    color: #ff3434;
    font-size: 1rem;
    padding-top: 0.5rem;
}
.p_r_b{
    width:70%;
    display: flex;
    justify-content: flex-end;
}
.p_num{
    padding:1rem;
}
.p_sub,.p_add{
    display: inline-block;
}
/* 多选框设置 */
input[type="checkbox"]:before{
    content: "\a0";
    background: url(/static/ck.png) no-repeat;
    width:1.2rem;
    height:1.2rem;
    background-size:1rem 12rem;
    background-position:0.1rem 0.1rem;
    display: inline-block;
    position: absolute;top: 0;left: 0;
}
input[type="checkbox"]:checked::before{
    content: "\a0";
    background: url(/static/ck.png) no-repeat;
    width:1.2rem;
    height:1.2rem;
    background-size:1rem 12rem;
    background-position:0.1rem -10.9rem;
    display: inline-block;
    position: absolute;
    top: 0;left: 0;
}
td>img{
    width:3rem;
    height:3rem;
}
td{
    position:relative;
}
.p_sub{
  background-image:url('/static/addNumSprite.png');
  display:inline-block;
  background-size:cover;
  width:1.8rem;
  height:1.8rem;
  background-position:-2.5rem 0;
  margin-top: 0.68rem;
}
.p_add{
  background-image:url('/static/addNumSprite.png');
  display:inline-block;
  background-size:cover;
  width:1.8rem;
  height:1.8rem;
  margin-top: 0.68rem;
}

/* 空购物车设置 */
#b_car{
    width:100%;
    text-align: center;
    background: #fff;
    border-top:0.1rem solid #d9d9d9;
    position: relative;
    height: 3rem;
    display: none;
}
.empty_car{
    width:100%;
    display: flex;
    justify-content: space-between;
    position:absolute;
    bottom:0;
}
.ec_car{
    width:20%;
    background:url(/static/cart.png) no-repeat;
    background-size: 3.5rem 8rem;
    background-position: 0.6rem 0.3rem;;
}
.ec_font{
    width:60%;
    text-align: left;
    font-size: 0.975rem;
    line-height: 3rem;

}
.ec_count,.ec_count2{
    width:30%;
    line-height: 3rem;
    font-size: 0.975rem;
    background:#bebebe;
    color: #fff;
}
.ec_count2{
    background:#47b34f;
    text-align: center;
}
</style>
